<template>
  <div class="home">
    <nav-header title="图书商城" right-text="我的书架" @click-right="onClickRight"></nav-header>
    <slft-cart :list="list"></slft-cart>
  </div>
</template>

<script>
// @ is an alias to /src
import navHeader from "../components/navHeader.vue";
import slftCart from "../components/slftCart.vue";
export default {
  name: "Home",
  components: { navHeader,slftCart },
  data() {
    return {
      list: [],
    };
  },
  created() {
    this.$axios.get("data.json").then((res) => {
      this.list = res.data;
    });
  },
  methods: {
    onClickRight() {
      this.$router.push("/about");
    },
  },
};
</script>
<style lang="scss">
.van-nav-bar__content {
  background: red;

  .van-nav-bar__title {
    color: #fff;
  }
}

.van-grid-item {
  // box-shadow: 5px 5px #ccc;
  span {
    display: inline-block;
    font-size: 12px;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
  }
  .foot {
    display: flex;
    height: 30px;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    color: #7179d9;
    font-size: 16px;
  }
}
</style>
